<template>
  <div class="index">
    <!-- 搜索栏 -->
    <div class="searchContent">
      关键字 :
      <input type="text" v-model="val" />
      <button>搜索</button>
    </div>
    <!-- 搜索列表 -->
    <div class="content-box">
      <ul class="content">
        <li>测试1</li>
        <li>测试2</li>
        <li>测试3</li>
        <li>测试4</li>
        <li>测试5</li>
        <li>测试6</li>
        <li>测试7</li>
        <li>测试8</li>
      </ul>
      <!-- 分页 -->
      <div class="fenye">
        <div>首页</div>
        <span>|</span>
        <div>上一页</div>
        <span>|</span>
        <div>下一页</div>
        <span>|</span>
        <div>末页</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { onMounted, reactive, ref } from "vue";
const router = useRouter();
const val = ref(JSON.parse(router.currentRoute.value.query.contentVal));
console.log(val.value);
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  .searchContent {
    margin: 20px;
    input {
      width: 200px;
      height: 30px;
    }
    button {
      height: 35px;
    }
  }
  .content-box {
    padding: 30px;
    .content {
      li {
        margin: 10px;
      }
    }
  }
  .fenye {
    width: 200px;
    margin: 20px;
    display: flex;
    justify-content: space-around;
  }
}
</style>